<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Async Loading Usage</title>
  <script src="https://unpkg.com/vue@3.2.4"></script>
  <script src="../../dist/vue-tree.umd.js"></script>
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="../../dist/vue-tree.css">
</head>

<body>
  <div class="container">
    <h1>Async Loading Usage</h1>
    <div id="app">
      <tree id="customtree" :load-nodes-async="loadNodesAsync" :model-defaults="modelDefaults" ref="tree"></tree>
    </div>
  </div>

  <script type='module'>
    Vue.createApp({
      components: {
        tree: window['vue-tree']
      },
      data() {
        return {
          childCounter: 0,
          loadNodesAsync: this.loadRootNodesCallback,
          modelDefaults: {
            loadChildrenAsync: this.loadChildrenCallback,
            deletable: true
          }
        };
      },
      methods: {
        async loadChildrenCallback(parentModel) {
          this.childCounter++;
          let currentCounter = this.childCounter;
          return new Promise(resolve => setTimeout(resolve.bind(null, [{ id: `child-node${currentCounter}`, label: `Child ${currentCounter}` }]), 1000));
        },
        async loadRootNodesCallback() {
          return new Promise(resolve => setTimeout(resolve.bind(null, [{ id: 'rootNode', label: 'Root Node', treeNodeSpec: { deletable: false } } ]), 1000));
        }
      }
    }).mount('#app');
  </script>
</body>

</html>